<template>
  <!-- Element UI的抽屉组件，用于显示选择或退选课程的界面 -->
  <el-drawer
    v-model="localDrawer"
    direction="rtl"
    @close="handleClose"
    append-to-body
    destroy-on-close
  >
    <!-- 抽屉头部，根据操作类型显示不同的标题 -->
    <template #header>
      <!-- 根据localType的值显示选择课程或退选课程的标题 -->
      <h4 v-if="localType === 'select'" class="text-lg font-bold">选择课程</h4>
      <h4 v-if="localType === 'cancel'" class="text-lg font-bold">退选课程</h4>
    </template>
    <template #default>
      <div v-loading="loading">
        <el-result
          v-if="localType === 'select'"
          icon="warning"
          title="确认吗"
          sub-title="请确认是否选择该课程？"
        >
        </el-result>
        <el-result
          v-if="localType === 'cancel'"
          icon="error"
          title="确认吗"
          sub-title="请确认是否退选该课程？"
        >
        </el-result>
        <!-- 使用v-for循环渲染课程详情 -->
        <template
          v-for="[key, value] in Object.entries(localItemData)"
          :key="key"
        >
          <div v-if="displayFields.includes(key)" class="pb-4">
            <!-- 显示课程详情的标签 -->
            <label class="font-bold text-base text-gray-400">{{
              getLabel(key)
            }}</label>
            <!-- 显示课程详情的输入框，内容不可编辑 -->
            <el-input
              v-model="localItemData[key]"
              class="h-12 w-full mt-2"
              disabled
            ></el-input>
          </div>
        </template>
      </div>
    </template>
    <!-- 抽屉底部，包含取消和确认按钮 -->
    <template #footer>
      <div style="flex: auto">
        <el-button :disabled="loading" @click="cancelClick">取消</el-button>
        <el-button :disabled="loading" type="primary" @click="confirmClick"
          >确认</el-button
        >
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, watch, reactive } from "vue";
import { ApiCourse } from "@/core/api/index.js";
import Swal from "sweetalert2";
import _ from "lodash";

const loading = ref(false);
const props = defineProps({
  drawer: {
    type: Boolean,
    required: true,
  }, // 控制抽屉显示的布尔值
  itemData: {
    type: Object,
    required: true,
  }, // 课程的详情数据
  type: {
    type: String,
    required: true,
  }, // 操作类型，'select' 或 'cancel'
});

// 定义组件的事件发射
const emit = defineEmits(["update:drawer", "refresh-list"]);
// 创建响应式引用，用于存储抽屉状态、课程详情和操作类型
const localDrawer = ref(props.drawer);
const localItemData = ref(props.itemData);
const localType = ref(props.type);

// 使用watch来监听props变化，并更新本地状态
watch(
  () => props.drawer,
  (newVal) => {
    localDrawer.value = newVal;
  }
);

watch(
  () => props.itemData,
  (newVal) => {
    localItemData.value = _.cloneDeep(newVal);
  },
  { deep: true }
);

watch(
  () => props.type,
  (newVal) => {
    localType.value = newVal;
  }
);

// 定义handleClose函数，用于处理抽屉关闭的逻辑
const handleClose = () => {
  emit("update:drawer", false);
};

// 定义getLabel函数，用于获取字段的标签
const getLabel = (field) => {
  // ... 根据字段名返回对应的标签文本 ...
  const labels = {
    courseId: "课程ID",
    courseName: "课程名称",
    now: "已选人数",
    all: "容量",
    teacher: "任课教师",
  };
  return labels[field];
};

// 定义displayFields，用于指定需要显示的字段
const displayFields = ["courseId", "courseName", "teacher"];

// 定义cancelClick函数，用于处理取消操作
const cancelClick = () => {
  emit("update:drawer", false);
};

// 定义confirmClick函数，用于处理确认操作
const confirmClick = () => {
  if (localType.value === "cancel") {
    exitCourse();
  }
  if (localType.value === "select") {
    chooseCourse();
  }
};
//异步，这意味着它可以内部使用 await 关键字等待 Promise 的解决，而不会阻塞代码的执行流程。
const chooseCourse = async () => {
  // 使用 await 关键字发起一个异步请求，调用 ApiCourse.chooseCourse 方法,将所选课程的信息发送到服务器
  loading.value = true;
  const response = await ApiCourse.chooseCourse({
    // 从 localItemData 对象中获取 courseId 并传递给 API
    courseId: localItemData.value.courseId,
  });
  if (response.code == 0) {
    // 如果选择课程成功，使用 Swal.fire 方法显示一个成功的提示框
    // SweetAlert2（Swal）是一个流行的 JavaScript 库，用于显示美观的弹窗
    Swal.fire({
      title: "成功选择课程",
      text: `您已成功选择${localItemData.value.teacher}老师的${localItemData.value.courseName}`,
      icon: "success",
    });
    // 使用 emit 方法触发一个名为 "refresh-list" 的事件
    // 这是为了通知其他部分的应用程序（如表格视图）刷新数据
    emit("refresh-list");
  }
  loading.value = false;
  emit("update:drawer", false);
};

const exitCourse = async () => {
  loading.value = true;
  const response = await ApiCourse.exitCourse({
    courseId: localItemData.value.courseId,
  });
  if (response.code == 0) {
    Swal.fire({
      title: "成功退选课程",
      text: `您已成功退选${localItemData.value.teacher}老师的${localItemData.value.courseName}`,
      icon: "success",
    });
    emit("refresh-list");
  }
  loading.value = false;
  emit("update:drawer", false);
};
</script>
